<template>
	<view class="container" v-if="dataInfo">
		<image class="avatar-box" :src="dataInfo.cover" mode=""></image>
		<view class="list-cell">
			<view class="cell-box">
				<view class="cell-left">
					<view class="label">圈子名称</view>
					<view class="value">
						{{dataInfo.name}}
					</view>
				</view>
			</view>

			<view class="cell-box">
				<view class="cell-left">
					<view class="label">圈子类型</view>
					<view class="value">
						{{dataInfo.type_id_name}}
					</view>
				</view>
			</view>
			<view class="cell-box" @click="onJumpUserList">
				<view class="cell-left">
					<view class="label">圈子人数</view>
					<view class="value">
						<view class="imgs">
							<image class="img-box" :src="dataInfo.user_avatar" mode=""></image>
							<!-- 	<image class="img-box" src="@/static/mine/default_avatar.png" mode=""></image>
							<image class="img-box" src="@/static/mine/default_avatar.png" mode=""></image>  -->
						</view>
						<view class="count">{{dataInfo.current_people}}人加入圈子</view>
					</view>
				</view>
				<image style="width:40rpx;height: 40rpx;" src="@/static/cell_right.png" mode=""></image>
			</view>
		</view>
		<view v-if="dataInfo.created_uid == userInfo.uid" class="btn-text text-del" @click="modalDelShow = true">
			删除圈子
		</view>
		<view class="btn-text text-exit" @click="modalExitShow = true">
			退出圈子
		</view>
		<!-- status 状态:0不可用，1可用 -->
		<view v-if="dataInfo.created_uid == userInfo.uid" class="btn-text text-exit" @click="handleStatus">
			{{['开启圈子','关闭圈子'][dataInfo.status]}}
		</view>


		<!-- 删除圈子 -->
		<u-modal :show="modalDelShow" confirmText="删除" buttonReverse @confirm="onConfirm('del')"
			@cancel="onCancel('del')" cancelText="否" :showCancelButton="true">
			<view class="slot-content">
				<view class="modal-content">
					是否删除圈子？
				</view>
			</view>
		</u-modal>
		<!-- 退出圈子 -->
		<u-modal :show="modalExitShow" confirmText="退出" buttonReverse @confirm="onConfirm('exit')"
			@cancel="onCancel('exit')" cancelText="否" :showCancelButton="true">
			<view class="slot-content">
				<view class="modal-content">
					是否退出圈子？
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				modalDelShow: false,
				modalExitShow: false,
				id: '',
				dataInfo: null
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.loadCircleDetail();
			}
		},
		methods: {
			handleStatus() {
				// 操作圈子
				this.$Net.post(this.$api.group_edit, Object.assign(this.dataInfo, {
					status: this.dataInfo.status == 0 ? 1 : 0
				}), 1).then(res => {
					this.loadCircleDetail();
					this.$Msg.Toast('操作成功')
				})
			},
			// 跳转到圈子用户
			onJumpUserList() {
				this.$Jump.Open('/pages/mine/circle/circleUser?id=' + this.id);
			},
			loadCircleDetail() {
				this.$Net.get(this.$api.group_detail + '/' + this.id, {}, 1).then(res => {
					this.dataInfo = res
				})
			},
			onConfirm(type) {
				if (type == 'del') {
					this.$Net.get(this.$api.group_del + '/' + this.id, {}, 1).then(res => {
						this.$Jump.Back();
						setTimeout(() => {
							this.$Msg.Toast(res || '删除成功')
						})
					})
				} else {
					this.$Net.get(this.$api.group_exit + '/' + this.id, {}, 1).then(res => {
						console.log('----', res);
						setTimeout(() => {
							this.$Msg.Toast(res || '退出成功')
						})
						this.$Jump.Back();

					})
				}
				if (type == 'exit') {
					this.modalExitShow = false;
				} else {
					this.modalDelShow = false;
				}
			},
			onCancel(type) {
				if (type == 'exit') {
					this.modalExitShow = false;
				} else {
					this.modalDelShow = false;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 32rpx;

		.avatar-box {
			width: 196rpx;
			height: 196rpx;
			border-radius: 24rpx;
			margin: 0 auto 80rpx;
			display: block;

		}

		.list-cell {
			width: 100%;
			margin-bottom: 148rpx;

			.cell-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 56rpx;

				.cell-left {
					display: flex;
					align-items: center;

					.label {
						color: rgba(0, 0, 0, 0.60);
						font-family: "PingFang SC";
						font-size: 32rpx;
						margin-right: 40rpx;
					}

					.value {
						color: #000;
						font-family: "PingFang SC";
						font-size: 32rpx;
						font-weight: 400;
						display: flex;
						align-items: center;

						.imgs {
							margin-left: 20rpx;
							margin-right: 16rpx;

							.img-box {
								display: inline-block;
								width: 56rpx;
								height: 56rpx;
								border-radius: 56rpx;
								margin-left: -20rpx;
								border: 1px solid #fff;
							}
						}

						.count {
							color: #000;
							font-family: "PingFang SC";
							font-size: 32rpx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.btn-text {
			color: #FF5F5F;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-weight: 400;
			margin-bottom: 32rpx;
		}

		.text-exit {
			color: #000;
		}
	}
</style>